<template>
	<view class="content">

		<view class="middle">
			<view class="forr" v-for="(item, idx) in list">
				<view class="guihua">
					<image src="../../../../static/activity/retirement/guihua3.png"></image>
				</view>
				<view class="imgs">
					<image :src="item.imgs" mode="" @click="details(item.content)"></image>
				</view>
				<view class="flexx" @click="click_whether(item.description, item.title)">
					<view>
						<view class="yuank"></view>
						<view :class="whether == item.description ? 'gouLan' : 'gou'"></view>
					</view>
					<view class="name">{{item.title}}</view>
				</view>
			</view>
		</view>

		<!-- btn_whether -->
		<view class="btn" @click="btn_whether" v-if="status == 1">
			<button>确认选择</button>
		</view>

		<view class="logo">
			<image src="../../../../static/activity/retirement/logo.png" mode=""></image>
		</view>

		<gui-popup ref="guimodal" :canCloseByShade="false">
			<view style="background-color: white; width: 550rpx; margin: 0 auto; border-radius: 10rpx;">
				<view style="padding-top: 30rpx; font-size: 35rpx; text-align: center;">提示</view>
				<view class="gui-color-gray" style="padding: 25rpx 45rpx; line-height: 1.5;">
					商品只可选择一次，确认后不可修改。是否确认选择
					<text style="color: red; margin-left: 6rpx;">{{title}}</text>
					。选择成功后在优惠券查看该商品核销券
				</view>
				<view style="display: flex; border-top:  1px solid #ccc; margin-top: 10rpx;">
					<view @tap="confirm" style="width: 50%; color: #317CFF; text-align: center; padding: 20rpx 0;">
						确认
					</view>
					<view @tap="cancel"
						style="width: 50%; color: #317CFF; text-align: center; padding: 20rpx 0; border-left:  1px solid #ccc;">
						取消
					</view>
				</view>
			</view>
		</gui-popup>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				whether: 0,
				title: null,
				status: null,
				type: null,
			}
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中...'
			});
			this.user = uni.getStorageSync("member");
			this.type = opt.type
			if (this.type == '2024') {
				this.get_coupon2024();
			} else if (this.type == '2025') {
				this.get_coupon2025();
			}
			this.get_list();
		},
		methods: {
			get_coupon2024() {
				let self = this
				this.$boya.Request({
					url: '/card_availability',
					data: {
						uuid: self.user.uuid,
						card_name: "2024年退休慰问品选择券",
					}
				}, function(res) {
					console.log('auditRes: ', res.data);
					uni.hideLoading();
					if (res.code == 200) {
						if (res.data.status) {
							// res.data.status为1：已审核通过
							// res.data.status为-1：审核不通过通过
							// res.data.status为0：未审核
							self.status = res.data.status
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: res.data
						});
					}
				}, false)
			},
			get_coupon2025() {
				let self = this
				this.$boya.Request({
					url: '/card_availability',
					data: {
						uuid: self.user.uuid,
						card_name: "2025年退休慰问品选择券",
					}
				}, function(res) {
					console.log('auditRes: ', res.data);
					uni.hideLoading();
					if (res.code == 200 && res.data.status == 1) {
						// res.data.status为1：已审核通过
						// res.data.status为-1：审核不通过通过
						// res.data.status为0：未审核
						self.status = res.data.status
					} else {
						self.$boya.Request({
							url: '/card_availability',
							data: {
								uuid: self.user.uuid,
								card_name: "2025年退休慰问品选择券(新)",
							}
						}, function(res) {
							console.log('auditRes: ', res.data);
							uni.hideLoading();
							if (res.code == 200 && res.data.status == 1) {
								// res.data.status为1：已审核通过
								// res.data.status为-1：审核不通过通过
								// res.data.status为0：未审核
								self.status = res.data.status
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data
								});
							}
						}, false)
					}
				}, false)
			},
			get_list() {
				let self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 24,
					}
				}, function(res) {
					uni.hideLoading();
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].name == '退休慰问') {
							let init_index = data[i].init_index
							for (var j = 0; j < init_index.length; j++) {
								if (init_index[j].imgs) {
									let img = init_index[j].imgs.substring(2, init_index[j].imgs.length - 2);
									init_index[j].imgs = img
								}
							}
							self.list = data[i].init_index
						}
					}
					console.log('res: ', self.list);
				}, false)
			},
			details(content) {
				uni.navigateTo({
					url: '/pages/activities/welfare/richText?content=' + content
				})
			},
			click_whether(description, title) {
				this.whether = description
				this.title = title
				console.log("couponId: ", this.whether);
				console.log("title: ", this.title);
			},
			btn_whether() {
				let self = this
				self.status--
				if (self.whether) {
					self.$refs.guimodal.open();
					self.yes = false
				} else {
					self.$boya.msg('您未勾选商品优惠券')
					self.status++
				}
			},
			confirm() {
				let self = this
				self.$refs.guimodal.close();
				// 改变选择券状态
				let name = null
				if (self.type == '2024') {
					name = '2024年退休慰问品选择券'
				} else if (self.type == '2025') {
					name = '2025年退休慰问品选择券'
				}
				let urlRemove = '/app/wallet_status_update'
				let parmRemove = {
					type: name,
					money: '0.00',
				}
				self.$boya.NPost(urlRemove, parmRemove, function(res) {
					console.log("Remove", res.data);
					// 发优惠券
					let couponId = self.whether
					let urlAdd = '/app/card_bag/coupon_add'
					let parmAdd = {
						coupon_id: couponId,
						status: 0,
						num: 1,
					}
					self.$boya.NPost(urlAdd, parmAdd, function(res) {
						console.log("setAdd: ", res.data);
						uni.showModal({
							title: '提示',
							content: '选择成功，您已选择优惠券: “ ' + self.title + ' ”',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.setStorageSync('retire_card', 'false');
									window.location.reload(true);
								}
							}
						})
					}, function(err) {
						console.log('创建优惠券err: ', err);
					})
				}, function(err) {
					console.log('删除选择券err: ', err);
				})
			},
			cancel() {
				let self = this
				self.$refs.guimodal.close();
				self.$boya.msg("用户取消选择");
				this.yes = true
			},
			// // 新建卡券测试
			// add() {
			// 	let self = this
			// 	let url = '/app/wallet_add'
			// 	let parm = {
			// 		type: '2024年退休慰问品选择券',
			// 		money: 0.00,
			// 	}
			// 	self.$boya.NPost(url, parm, function(res) {
			// 		console.log("setBadd", res.data);
			// 	}, false, false)
			// },
			// // 删优惠券测试
			// quxiao() {
			// 	let self = this
			// 	let couponId = [458825, 458824, 458823, 458822, 458821]
			// 	for (var i = 0; i < couponId.length; i++) {
			// 		let url = '/app/card_bag/coupon_remove'
			// 		let parm = {
			// 			id: couponId[i]
			// 		}
			// 		self.$boya.NPost(url, parm, function(res) {
			// 			console.log("setAremove: ", res.data);
			// 			self.$boya.msg("用户取消选择");
			// 		}, function(err) {
			// 			console.log('删券err: ', err);
			// 		})
			// 	}
			// }
		},
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url('../../../../static/activity/retirement/lanjin.png') 100% 100% / 100% 100%;
		/* background: linear-gradient(to top, #57785d, #8d9882, #fff); */
	}

	.middle {
		color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 100rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.forr {
		margin: 25rpx 0;
	}

	.guihua {
		width: 190rpx;
		height: 190rpx;
		position: absolute;
		z-index: 99;
		margin-left: 150rpx;
		margin-top: -30rpx;
	}

	.guihua>image {
		width: 100%;
		height: 100%;
	}

	.imgs {
		width: 258rpx;
		height: 258rpx;
		border: 12px solid #fff;
		border-radius: 40rpx;
		background-color: #fff;
	}

	.imgs>image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.flexx {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 12rpx;
	}

	.gouLan {
		width: 24rpx;
		height: 24rpx;
		background-color: #2979FF;
		border-radius: 50%;
		position: absolute;
		margin-top: -33rpx;
		margin-left: 10rpx;
	}

	.gou {
		display: none;
	}

	.name {
		margin-left: 10rpx;
		font-weight: bold;
	}

	.yuank {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		border: 2px solid #2979FF;
		position: relative;
	}

	.btn {
		width: 45%;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.btn>button {
		color: white;
		font-size: 40rpx;
		font-weight: bold;
		background: linear-gradient(to top, #F19D80, #B61A22, #B61A22);
	}

	.logo {
		width: 320rpx;
		height: 60rpx;
		position: absolute;
		top: 18rpx;
		right: 20rpx;
	}

	.logo>image {
		width: 100%;
		height: 100%;
	}
</style>